<template>
	<view class="wrap">
		<form  @submit="submit" >
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" 
						placeholder-class="line" 
						placeholder="请填写会员昵称" 
						name="nickname"
						v-model="nickname"
					 />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<u-upload ref="uUpload"
						name="avatarurl"
						:fileList="oldAvatarUrl"
						max-count="1"
						:action="action"
						upload-text="上传头像"
						:auto-upload="false" 
						@on-success="uploadsuccess"
						@on-error="uploaderror"
						@on-choose-complete="chooseimg"
						:form-data="formData"
						:header="header"
					></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio 
								v-for="(item, index) in sexlist" :key="index" 
								:name="item.value"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<input disabled type="text" 
						placeholder-class="line" 
						placeholder="请选择生日" 
						name="birthday" 
						v-model="birthday"
					/>
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input
						disabled
						type="text"
					  	placeholder-class="line" 
					  	placeholder="省市区县、乡镇等" 
					  	name="region" 
					  	v-model="region"
					  />
				</view>
			</view>
			<regionPicker
				:visible.sync="regionVisible"
				mode="region"
				default-type="value"
				:hide-area="false"
				@confirm="onConfirm($event,'region')"
				ref="region" 
			></regionPicker>
			<u-picker 
				mode="time" 
				ref="uPicker" 
				v-model="birthdayShow" 
				@confirm="birthdayConfirm"
			/>
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset" >重置</button>
		</form>
	</view>	
</template>

<script>
	
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components:{regionPicker},
		data() {
			return {
				id:'',//初始化修改数据id
				// 头像提交服务端地址
				action: this.$baseUrl+`/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl:[],
				// 表单数据(不含头像信息)
				formData:{},
				// 初始化header头
				header:{},
				oldImg:'',//初始化旧图片
				regionVisible:false,//初始化地区选择器开关
				nickname:'鲁班',//初始化收件人姓名
				region:'',//初始化地区默认值
				birthday:'',
				birthdayShow:false,
				sexlist:[
						{value:1,name:'男'},
						{value:2,name:'女'},
					],
				sex:1//初始化会员性别
			}
		},
		
		onLoad(){
			
			// 请求用户信息
			this.getuserinfo()
		},
			
		methods: {
			// 保存并使用  修改信息
			// http://localhost:3000/api/infoedit
			async submit(){
				
				let {token }=uni.getStorageSync("userinfo")
				
				this.formData={
					id:this.id,
					nickname:this.nickname,
					sex:this.sex,
					region:this.region,
					birthday:this.birthday
				}
				this.header={
					authorization:token
				}
				// this.id
				// this.nickname
				// this.sex
				// this.region
				// this.birthday
				// 上传头像(同时会把其他信息上传上去)
				// 有新头像
				if(this.$refs.uUpload.lists[0].file){
					setTimeout(()=>{
					    this.$refs.uUpload.upload()
					},50)
					return
				}
			
				// 没有新头像()
				let [err,res]=await uni.request({
					url:this.$baseUrl+"/api/infoedit",
					method:"POST",
					header:this.header,
					data:this.formData
				})
				if(err){
					uni.showToast({
						title:'出错了'
					})
					return
				}
				if(res.data.code==403){
				    uni.showToast({
				    	title:"登录已过期"
				    }) 
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/login/login"
						})
					},1000)
					return
				}
				if(res.data.code!=200){
					uni.showToast({
						title:"出错了"
					})
					return
				}
				
				this.getuserinfo("type")
				
				// console.log(res,"res");
				uni.showToast({
					title:"修改成功"
				})
				setTimeout(()=>{
					uni.switchTab({
						url:"/pages/user/user"
					},1000)
				})
			},
			
		    // 请求用户信息
			// http://localhost:3000/api/getuserinfo
			async getuserinfo(type){
				
				// 获取本地信息
				let {token,uid}=uni.getStorageSync("userinfo")
				
				let[err,res]=await uni.request({
					url:this.$baseUrl+"/api/getuserinfo",
					header:{
						authorization:token
					},
					data:{
						uid
					}
				})
				if(err){
					uni.showToast({
						title:'出错了'
					})
					return
				}
				if(res.data.code==403){
				    uni.showToast({
				    	title:"登录已过期"
				    }) 
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/login/login"
						})
					},1000)
					return
				}
				if(res.data.code!=200){
					uni.showToast({
						title:"出错了"
					})
					return
				}
				
				// console.log(res);
				
				let {avatarurl,birthday,nickname,region,sex,id}=res.data.list[0]           
				// 修改本地存储
				if(type=="edit"){
					let newuserinfo=res.data.list[0]
					newuserinfo.token=token
					newuserinfo.avatarurl=this.$baseUrl+avatarurl
					uni.setStorageSync("userinfo",newuserinfo)
				}
				
				// 数据回显
		        this.oldAvatarUrl=[{url:this.$baseUrl+avatarurl}]
				this.nickname=nickname
				this.sex=sex
				this.birthday=birthday
				this.region=region
				this.id=id
				
				// avatarurl
				// : 
				// "/uploads/tou.jpg"
				// birthday
				// : 
				// null
				// id
				// : 
				// 16
				// nickname
				// : 
				// "133****3333"
				// phone
				// : 
				// "13333333333"
				// region
				// : 
				// null
				// sex
				// : 
				// 1
				// uid
				// : 
				// "858a7310-6040-11ed-b6a9-b7cd45fb6a03"
				
			},
			
			// 选择会员地区
			onConfirm(res){
				this.region=res.result
				
				
			},
			// 监听本地选择图片
			chooseimg(lists, name){
			},
			// 性别标签切换
			radioGroupChange(e){
			},
		
			// 地址默认设置开关
			setDefault(e){
			},
		
			// 开始生日选择器
			showBirthdayPicker(){
				this.birthdayShow = true;
			},
			// 监听时期选择器
			birthdayConfirm(e){
				
				this.birthday=`${e.year}-${e.month}-${e.day}`
				
			},
			
			// 图片上传成功触发
			uploadsuccess(data, index, lists, name){
				
				console.log(data, index, lists, name);
		
				if(data.code==403){
				    uni.showToast({
				    	title:"登录已过期"
				    }) 
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/login/login"
						})
					},1000)
					return
				}
				if(data.code!=200){
					uni.showToast({
						title:"出错了"
					})
					return
				}
				this.getuserinfo("edit")
				uni.showToast({
					title:"修改成功"
				})
				setTimeout(()=>{
					uni.switchTab({
						url:"/pages/user/user"
					},1000)
				})
				
			},
			// 图片上传失败触发
			uploaderror(res, index, lists, name){
				
				
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>
